<template>
  <div>
    <n-card rd-8 shadow-sm segmented>
      <full-table
        ref="tableRef"
        cache-key="role-manage"
        :columns="columns"
        :request="getList"
        :row-key="(row) => row.id"
      >
        <template #left-top>
          <n-button type="info" @click="handleAdd"> 新建 </n-button>
        </template>
      </full-table>

      <create-drawer
        ref="drawerRef"
        :page-type="formType"
        :data="checkedRow"
        @submit-success="tableRef?.getData"
      />
      <assign-perms ref="assignRef" :role="checkedRow" />
    </n-card>
  </div>
</template>

<script lang="tsx" setup>
import { useTable } from "./common";
import { AssignPerms, CreateDrawer } from "./components";
import { useService } from "./service";

defineOptions({ name: "ManageRole" });

const tableRef = ref();
const drawerRef = ref();
const assignRef = ref();
const formType = ref<"add" | "edit">("add");
const checkedRow = ref<Role>();

const showCreateDrawer = (type: "add" | "edit") => {
  formType.value = type;
  drawerRef.value.show();
};

const showAssignModal = () => assignRef.value.show();

const getData = () => tableRef.value?.getData();

const {
  getList,
  handleUpdateStatus,
  handlePerms,
  handleAdd,
  handleEdit,
  handleRemove,
} = useService(checkedRow, showCreateDrawer, showAssignModal, getData);

const { columns } = useTable(
  handleUpdateStatus,
  handlePerms,
  handleEdit,
  handleRemove
);
</script>
